<template>
  <a-drawer
    :title="title"
    :width="850"
    :visible="visible"
    :body-style="bodyStyle"
    @close="visible = false">
    <span v-for="(item,index) in showColumns" :key='item.dataIndex' class="half-content">
      <span class="title">{{item.title}}:</span>
      
      <component class="edit-content" :is="item.slotType" :key="`${item.dataIndex}-${data.id}`" 
        :data='data' :isEdit="true" :columnInfo='item' @update='updateListener($event,item.dataIndex)'/>
    </span>
    <deliverContent class='deliver-content' ref='ref_deliver_drawer' :deliverCols='deliverCols' :isAction='true'
      @update='updateListener(arguments[0],arguments[1])'/>
    <div class="btn-content">
      <a-button :style="{ marginRight: '8px' }" type="primary" @click="submitUpdate(false)">
        应用
      </a-button>
      <a-button @click="submitUpdate(true)">
        确定
      </a-button>
    </div>
  </a-drawer>
</template>
<script>
import deliverContent from '@/views/singleProject/projectPlan/components/deliver'
import completetxt from '@/components/pubTable/components/columns/completetxt'
import date from '@/components/pubTable/components/columns/date'
import tree from '@/components/pubTable/components/columns/tree'
import day from '@/components/pubTable/components/columns/day'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import { timeFormat } from '@/utils/util.js'
export default {
  components: {
    date,
    completetxt,
    tree,
    day,
    deliverContent
  },
  inject: ['setMinMaxDate','mathWorkTime'],
  computed: {
    ...mapGetters({
      getColumns: 'getPlanColumns',
      showSource: 'getPlanTable',
      isLastChildNode: 'isLastChildNode'
    }),
    bodyStyle() {
      return { padding: '5px 0 80px 0' }
    },
    showColumns() {
      return this.getColumns().filter(item => {
        return item.edit && this.parentNoEdits.includes(item.dataIndex)
      });
    }
  },
  data() {
    return {
      deliverCols: [
        {
          title: "交付物要求",
          dataIndex: 'name', 
          slotType: 'showspan',
          width: 220,
          scopedSlots: {
            customRender: 'name'
          }
        },
        {
          title: "交付物",
          dataIndex: 'subjectName', 
          slotType: 'upload',
          scopedSlots: {
            customRender: 'subjectName'
          }
        },
        {
          title: "交付物状态",
          dataIndex: 'subjectState',
          width: 120,
        }
      ],
      parentNoEdits: ['targetStartDate','targetEndDate','name','reviewerReference','resource','targetDuration.millis'],
      clickNode: null,
      workTimeOfDay: 24,
      dateFormat: 'YYYY-MM-DD',
      visible: false,
      data: '',
      title: ''
    }
  },
  methods: {
    ...mapMutations(['setRowOfPlanTable']),
    ...mapActions(['addNodeOfPlanTable']),
    submitUpdate(close) {
      if (this.verify()) {
        this.$refs.ref_deliver_drawer.submitData(() => {
          this.editData(this.data)
          this.$message.success('编辑完成')
          close && (this.visible = false)
        });
      }
    },
    editData(target) {
      this.mathWorkTime(target,target.targetStartDate,target.targetEndDate);
      this.setRowOfPlanTable(target)
      this.setMinMaxDate(target,this.$store.state.planTable.planTable,false);
    },
    show(data,title) {
      this.title = title
      this.visible = true
      this.$nextTick(() => {
        this.$refs.ref_deliver_drawer.getDetails(data)
      })
      this.data = JSON.parse(JSON.stringify(data));
    },
    //修改输入值
    updateListener(value,key) {
      if (key == 'targetDuration.millis'){
        let endDay = new Date(this.data.targetEndDate);
        endDay.setDate(endDay.getDate() + (value - this.data[key]))
        this.data.targetEndDate = timeFormat(endDay,this.dateFormat)
      }
      this.data[key] = value
      if (key == 'targetStartDate' || key == 'targetEndDate') {
        this.mathWorkTime(this.data,this.data.targetStartDate,this.data.targetEndDate);
      }
    },
    //验证输入
    verify() {
      if (this.data.name == '') {
        this.$message.error(`请输入任务名称`);
        return false
      }
      return true
    }
  }
}
</script>
<style scoped lang="less">
.deliver-content {
  margin: 0 50px
}
.one-row .edit-content /deep/ .ant-select-auto-complete {
  width: 100%
}
.btn-content {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.half-content {
  width: 50%;
  display: inline-flex;
  line-height: 50px;
  padding: 0 50px
}
.one-row {
  width: 100% !important;
}
.title {
  font-size: 14px;
  text-align: left;
  width: 130px;
}
.edit-content {
  flex:  1;
  display: inline-block !important
}
</style>